<template>
	<!-- Preloader Start -->
	<!-- <div id="preloader">
        <div class="preloader--spinners">
            <div class="preloader--spinner preloader--spinner-1"></div>
            <div class="preloader--spinner preloader--spinner-2"></div>
        </div>
    </div> -->
	<!-- Preloader End -->

	<!-- Wrapper Start -->
	<div class="wrapper">
		<!-- Header Area Start -->
		<header id="header">
			<nav class="navbar">
				<div class="container">
					<!-- Header Navbar Header Start -->
					<div class="navbar-header">
						<!-- Header Nav Toggle Button Start -->
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
							data-target="#headerNav" aria-controls="headerNav">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<!-- Header Nav Toggle Button End -->

						<!-- Header Custom Button Start -->
						<a href="login.html" class="header--custom-btn btn--default hover">LOGIN</a>
						<!-- Header Custom Button End -->
						
						<!-- Header Logo Start -->
						<a href="index.html" class="navbar-brand">
							<h1><img src="./img/logo1.png" style="height: 26px;width:26px;">&nbsp&nbsp<span>Smart Investment Promotion System &nbsp</span>数智招商系统</h1>
						</a>
						<!-- Header Logo End -->
					</div>
					<!-- Header Navbar Header End -->

					<!-- Header Custom Button Start -->
					<a href="login.html" class="header--custom-btn btn--default hover">登录</a>
					<!-- Header Custom Button End -->

					<!-- Header Nav Start -->
					<div id="headerNav" class="navbar-collapse collapse">
						<ul class="nav navbar-nav navbar-right">
							<li><a href="index.html">首页</a></li>


							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">BLOG<span
										class="caret"></span></a>
								<ul class="dropdown-menu">

									<li><a href="blog-details-left.html">BLOG DETAILS LEFT</a></li>

								</ul>
							</li>

						</ul>
					</div>
					<!-- Header Nav End -->
				</div>
			</nav>
		</header>
		<!-- Header Area End -->

		<!-- Page Header Area Start -->
		<div id="pageHeader" class="bg--overlay" data-bg-img="img/page-header-img/bg.png">
			<div class="container">
				<!-- Page Title Start -->
				<div class="page-header--title">
					<h2>数智招商</h2>
				</div>
				<!-- Page Title End -->

				<!-- Page Breadcrumb Start -->
				<!-- <div class="page-header--breadcrumb">
					<ul class="breadcrumb">
						<li><a href="index.html">HOME</a></li>
						<li class="active">LOGIN</li>
					</ul>
				</div> -->
				<!-- Page Breadcrumb End -->
			</div>
		</div>
		<!-- Page Header Area End -->

		<!-- Login Area Start -->
		<div id="login" class="bg--lightgrey">
			<div class="container">
				<div class="login--form">
					<!-- Login Form Start -->
					<form action="http://billing.ywhmcs.com/dologin.php?systpl=ColorHost" method="post">
						<div class="form-group">
							<label for="loginEmail">用户名</label>
							<input type="email" name="username" class="form-control" id="loginEmail" placeholder="EMAIL">
							<span class="highlight"></span>
						</div>

						<div class="form-group">
							<label for="loginPassword">密码</label>
							<input type="password" name="password" class="form-control" id="loginPassword"
								placeholder="PASSWORD">
							<span class="highlight"></span>
						</div>

						<button  class="btn--default hover" @click="navigateToTargetPage">登录</button>
						<a href="http://billing.ywhmcs.com/pwreset.php?systpl=ColorHost" class="btn--default hover">忘记密码</a>
					</form>
					<!-- Login Form End -->
				</div>
			</div>
		</div>
		<!-- Login Area End -->

		<!-- Footer Area Start -->
		<footer id="footer">
			<!-- Footer Widgets Start -->

			<!-- Footer Widgets End -->

			<!-- Footer Copyright Start -->
			<div class="footer--copyright">
				<div class="container">
					<p>备案号:京ICP备18000994号-4 中关村军民科技协同创新孵化中心</p>
				</div>
			</div>
			<!-- Footer Copyright End -->
		</footer>
		<!-- Footer Area End -->

		<!-- Back To Top Button Start -->
		<div id="backToTop">
			<a href="#top"><i class="fa fa-angle-up"></i></a>
		</div>
		<!-- Back To Top Button End -->
	</div>
	<!-- Wrapper End -->
</template>

<script>
import config from "@/config"
import passwordForm from './components/passwordForm'
import phoneForm from './components/phoneForm'
import { setSystemGrey } from "@/utils/util";
export default {
	components: {
		passwordForm,
		phoneForm,
	},
	data() {
		return {
			apiUrl: config.API_URL,
			encyCode: this.$route.query.encyCode,
			verifyCode: '',
			tecSupport: '',
			recordNumber: '',
			sysTitle: '',
			APP_NAME: '',
			VERSION: '',
			langFlag: '0',
			config: {
				lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
				dark: this.$TOOL.data.get('APP_DARK') || false
			},
			lang: [
				{
					name: '简体中文',
					value: 'zh-cn',
				},
				{
					name: 'English',
					value: 'en',
				}
			],
			WechatLoginCode: "",
			isWechatLoginResult: false,
			backImag: '',
			backImagArr: [],
			timer: null,
			findPass: '0',
			remUserPass: '0',
			isShow: false
		}
	},
	watch: {
		'config.dark'(val) {
			if (val) {
				document.documentElement.classList.add("dark")
				this.$TOOL.data.set("APP_DARK", val)
			} else {
				document.documentElement.classList.remove("dark")
				this.$TOOL.data.remove("APP_DARK")
			}
		},
		'config.lang'(val) {
			this.$i18n.locale = val
			this.$TOOL.data.set("APP_LANG", val)
		},

	},
	created: function () {
		this.getSysInterfaceForLogin();
		this.$TOOL.cookie.remove("TOKEN")
		this.$TOOL.data.remove("USER_INFO")
		this.$TOOL.data.remove("MENU")
		this.$TOOL.data.remove("PERMISSIONS")
		this.$TOOL.data.remove("grid")
		this.$store.commit("clearViewTags")
		this.$store.commit("clearKeepLive")
		this.$store.commit("clearIframeList")
		// 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
		clearInterval(this.timer)
		this.timer = null
	},
	methods: {
		navigateToTargetPage() {

			this.$router.push('/enterprise/enterpriseSearch');

		},

		async getSysInterfaceForLogin() {
			let res = await this.$API.system.sysInterface.getSysInterfaceForLogin.get();
			if (res.code == 200) {
				this.$TOOL.data.set("ATTACH_HOST", res.data.pageOfficeHost)
				this.$TOOL.data.set("OFFICE_TYPE", res.data.officetype)
				this.$TOOL.data.set("OFD_TYPE", res.data.ofdtype);
				this.$TOOL.data.set("OPEN_ON_LINE_FLAG", res.data.openOnLineFlag);
				this.$TOOL.data.set("SYSTEM_GREY", res.data.systemGrey);
				let greyJson = res.data.systemGrey;
				if (greyJson.greyStatus === '1') {
					setSystemGrey(greyJson.greyEndTime);
				} else {
					window.localStorage.removeItem("GREY_END_TIME");
				}
				this.remUserPass = res.data.remUserPass;
				this.findPass = res.data.findPass;
				if (this.remUserPass == '0') {
					this.$TOOL.cookie.remove("TOKEN");
					this.$TOOL.cookie.remove("AUTO_LOGIN");
					this.$TOOL.cookie.remove("ACCOUNT_ID");
					this.$TOOL.cookie.remove("PASS_WORD");
				}
				if (this.encyCode != undefined && this.encyCode != '') {
					var user = await this.$API.auth.token.post({ encyCode: this.encyCode });
					if (user.code == 200) {
						this.$TOOL.cookie.set("TOKEN", user.data.token, {
							expires: 24 * 60 * 60
						})
						this.$TOOL.data.set("USER_INFO", user.data.userInfo)
						this.$TOOL.data.set('APP_LANG', user.data.userInfo.language);
						this.$TOOL.data.set('APP_COLOR', user.data.userInfo.theme);
						this.$TOOL.data.set("MSG_TIME", user.data.msgtime);
					} else if (user.code == 300) {
						this.$router.replace({
							path: '/system/info'
						})
						return;
					} else if (user.code == 400) {
						this.$router.replace({
							path: '/resetPassword'
						})
						return;
					} else {
						this.islogin = false
						this.$message.warning(user.message)
						return false
					}
					//获取菜单
					var menu = await this.$API.system.menu.myMenus.get()
					if (menu.code == 200) {
						if (menu.data.menu.length == 0) {
							this.islogin = false
							this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
								type: 'error',
								center: true
							})
							return false
						}
						this.$TOOL.data.set("MENU", menu.data.menu)
						this.$TOOL.data.set("PERMISSIONS", [
							"list.add",
							"list.edit",
							"list.delete",
							"user.add",
							"user.edit",
							"user.delete"
						])
					} else {
						this.islogin = false
						this.$message.warning(menu.message)
						return false
					}
					this.$router.replace({
						path: '/'
					})
				}
				this.APP_NAME = res.data.APP_NAME;
				this.VERSION = res.data.VERSION;
				this.verifyCode = res.data.verifyCode;
				this.$CONFIG.APP_VER = res.data.VERSION;
				this.recordNumber = res.data.recordNumber;
				this.langFlag = res.data.langFlag;
				if (res.data.sysTitle != undefined && res.data.sysTitle != '') {
					this.sysTitle = res.data.sysTitle;
					this.$CONFIG.APP_NAME = res.data.sysTitle;
				} else {
					this.sysTitle = this.$CONFIG.APP_NAME;
				}
				this.$TOOL.data.set("APP_NAME", this.sysTitle)
				document.title = "登录 - " + this.$CONFIG.APP_NAME;
				config.APP_NAME = this.$CONFIG.APP_NAME;
				if (res.data.backgroundImg != undefined && res.data.backgroundImg != '') {
					let arr = res.data.backgroundImg.split(",");
					arr.forEach(item => {
						this.backImagArr.push(item)
					})
					this.backImag = this.backImagArr[0];
				} else {
					this.backImagArr = ['img/backgrounds/1.jpg', 'img/backgrounds/2.jpg', 'img/backgrounds/3.jpg', 'img/backgrounds/4.jpg'];
					this.backImag = this.backImagArr[0];
				}
				this.tecSupport = res.data.tecSupport;
				this.setTimer();
				this.isShow = true;
			}
		},
		configDark() {
			this.config.dark = this.config.dark ? false : true
		},
		configLang(command) {
			this.config.lang = command.value
		},
		setTimer() {
			if (this.timer == null) {
				let count = 1;
				let length = this.backImagArr.length;
				this.timer = setInterval(() => {
					this.backImag = this.backImagArr[(count % length)];
					count = count + 1;
				}, 10000)
			}
		}
	}
}
</script>
<style scoped>
@import 'https://fonts.googleapis.com/css?family=Roboto%7COswald:300,400,700';
@import 'http://cdn.bootstrapmb.com/bootstrap/3.3.7/css/bootstrap.min.css';
@import './css/font-awesome.min.css';
@import './css/owl.carousel.min.css';
@import './css/style.css';
@import './css/responsive-style.css';
@import './css/theme-color-1.css';
@import './css/custom-style.css'
</style>
